<template>
  <el-dialog v-model="data.deleteVisible" width="30%" align-center class="public-dialog" title="提示" :close-on-click-modal="false">
    <div class="flex content">
      <SvgIcon icon-class="HintFilled"/>
      <span class="ml-[2px]">{{ props.content }}</span>
    </div>
    <template #footer>
      <div class="dialog-footer" v-if="data.isType">
        <el-button @click="cancel">取消</el-button>
        <el-button color="#E50113" :dark="isDark" @click="confirm">
          删除
        </el-button>
      </div>
      <div class="dialog-footer" v-else>
        <el-button type="primary" @click="cancel">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="Dialog">
import SvgIcon from "@/components/SvgIcon/index.vue";
const emits = defineEmits(['cancel', 'confirm']);
// 声明接收参数
const props = defineProps({
  content: {
    type: String,
    default: ''
  },
})
const data = reactive({
  deleteVisible: false,
  isType: true
})
const open = () => {
  data.deleteVisible = true
}
const confirm = () => {
  emits('confirm')
}
const cancel = () => {
  data.deleteVisible = false
  emits('cancel')
}
defineExpose({
  open, data
})
</script>
<style lang="scss" scoped>
.content {
  align-items: center;

  span {
    margin-left: 5px;
  }
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}
</style>